<template>
<h2>统计报表</h2>
<div ref="panel" class="chart"></div>

</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted,ref,reactive} from 'vue'
import axios from '../axios/index.js'

let panel=ref(null)
onMounted(async()=>{
      //远程获取报表数据
       let d=await axios.get("/report")
       let ary=d.data.data;
     

     //加载图表数据
       var myChart = echarts.init(panel.value);

       let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '70%'],
                    // adjust the start and end angle
                    startAngle: 180,
                    endAngle: 360,
                    data: ary.map((x)=>{return {value:x.value,name:x.type}})
                }
            ]
        };

        myChart.setOption(option);
});

</script>
<style scoped>
.chart{
    width:500px;
    height:500px;
    margin:20px auto;
    border:1px solid #ccc
}
</style>